<template>
    <div id="Main">
      <el-container>
<!--        头部栏-->
        <el-header>
<!--          <div>-->
            <img src="../../static/logo1.png" alt="" width="50px" height="50px" style="float: left;margin-top: 5px">
            <span class="header_title">PIS系统</span>
            <el-button type="info" @click="logout" class="logoutbtn">
            <i class="el-icon-switch-button"></i>退出
          </el-button>
            <span class="username">{{username}}</span>
            <el-avatar :size="50" :src="circleUrl" class="Avatar"></el-avatar>
        </el-header>
<!--        侧边栏-->
        <el-container>
          <el-aside>
            <el-col>
              <el-menu text-color="#04D1AD" active-text-color="#11FFCA" router>
                <el-menu-item index="Tag01">
                <i class="el-icon-setting"></i>
                <span slot="title">系统设置</span>
              </el-menu-item >
                <el-menu-item index="Tag02">
                  <i class="el-icon-s-promotion"></i>
                  <span slot="title">我的音乐</span>
                </el-menu-item>
                <el-menu-item index="Tag03">
                  <i class="el-icon-s-marketing"></i>
                  <span slot="title">数据接收</span>
                </el-menu-item>
                <el-menu-item index="Chat">
                <i class="el-icon-chat-round"></i>
                <span slot="title">聊天室</span>
              </el-menu-item>
              </el-menu>
            </el-col>

          </el-aside>
<!--          主页面-->
          <el-main>
            <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
    import Tag02 from "../components/Tag02";
    export default {
      name: "Main",
      components: {Tag02},
      methods: {
        logout(){
          // 删除sessionStorage缓存数据
           sessionStorage.clear();
           localStorage.clear();
           this.$router.push({
             path:"/"
           });
           // 刷新窗口，将vuex数据清除
          window.location.reload();
        }
      },
      data(){
        return{
          username:this.$route.query.username,
          // circleUrl: "../../static/logo1.png"
          circleUrl:" https://img1.baidu.com/it/u=4183257004,4088945398&fm=26&fmt=auto&gp=0.jpg "
        }
      }
    }
</script>

<style scoped>
  #Main{
    padding: 0 0;
  }
  .el-main{
    padding: 10px;
  }
  /*用户名*/
  .username{
    float: right;
    margin-right: 10px;
    margin-top: -20px;
    display: block;
    font-size: large;
    font-family: "Arial","Microsoft YaHei","黑体","宋体",normal;
    color: #ffffff;
  }
  /*头像*/
  .el-avatar{
    float: right;
    display: inline;
    margin-right: 10px;
    margin-top: 5px;
  }
  /*退出按钮*/
  .logoutbtn{
    background-color: rgba(190,193,255,1);
    float: right;
    display: block;
    margin-top: 10px;
    /*margin-right: -160px;*/
    width: 80px;
    text-align: center;
  }
  .header_title{
    color: #ffffff;
    float: left;
    margin-top: -19px;
    margin-left: 1%;
    font-size: large;
    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
  }
  .el-header{

    text-align: left;
    line-height: 100px !important;
    /*color: aqua;*/
    background-color: #bec1ff;
  }
  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
     line-height: 60px;
  }
.header_title{
  line-height: 100px;

}
  .el-aside {
    padding: 0 0;
    background-color: #ffffff;
    color: #333;
    text-align: center;
    height: 100%;
  }

  .el-main {
    /*background-color: #E9EEF3;*/
    color: #333;
  }

  body > .el-container {
    /*margin-bottom: 40px;*/
    height: 100%;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>
